<div class="article-preview">
  <div class="article-meta">
    <img alt="avatar" class="avatar" [src]="article.author.image" />
    <div class="info">
      <a [routerLink]="'/@' + article.author.username" class="author">{{
        article.author.username
      }}</a>
      <p class="date">{{ article.createdAt | date : "MMMM d, y" }}</p>
    </div>
    <button
      class="btn btn-sm ms-auto"
      [ngClass]="article.favorited ? 'unfavorite-btn' : 'favorite-btn'"
      (click)="toggleFavorite.emit(article)"
    >
      <i class="fa-solid fa-heart"></i> {{ article.favoritesCount }}
    </button>
  </div>
  <div [routerLink]="['/article', article.slug]" class="preview-link">
    <h1 class="title">
      {{ article.title }}
    </h1>
    <p class="description">
      {{ article.description }}
    </p>
    <div class="footer">
      <span class="read-more">Read more...</span>
      <div class="tags">
        <ng-container *ngFor="let tag of article.tagList"
          ><span class="tag-default">{{ tag }}</span>
        </ng-container>
      </div>
    </div>
  </div>
</div>
